<!DOCTYPE html>
<html>
    <head>
        <title>响当当的标题</title>
        <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="static/alert.css">

    
    </head>
    <style>
        @font-face{
    　　font-family: ttq1;
    　　src: url("font/ttq.ttf");
    }
        h1{
            font-family: ttq1;
            font-size: 20px;
        }
        #myform{
            width: 70%;
            height: 300px;
            border: 2px solid rgba(255,204,153,.9);
            -webkit-border-radius: 15%;
            -moz-border-radius: 15%;
            border-radius: 15%;
            padding: 3%;
            margin: 5% auto;
        }
        .upc{
            display: block;
            outline-style: none;
            opacity: 0;
            width: 50%;
            height: 50%;
            float: left;
            position: relative;
            border: 1px solid #000;
            z-index: 12;
            margin-left: 10%;
            padding-bottom: 5%;
        }
        .sp{

            display: block;

        }
        .su{
           display: block;
            margin-left: -50%;
            float: left;
            border: 2px solid rgba(255,204,153,.9);
            position: relative;
            z-index: 1;
            width: 50%;
            height: 40%;
            border-radius: 10px;
            text-align: center;
            font-size: 1em;
            line-height: 2em;
        }
        table{
            width: 100%;
            height: 300px;
            text-align: center;
        }
        td{
            display:table-cell;
            vertical-align:middle;
            white-space:nowrap;
        }
        tr{
            text-align: center;
        }
        .btnc{
            width: 100%;
            height: 50%;
            border: 2px solid rgba(255,204,153,.8);
            border-radius: 10px;
            outline-style: none;
            background-color: initial;
        }
        .btnc:hover{
            background-color: rgba(255,204,153,.5);
        }
        img{
            display: block;
            border-radius: 10px;
            border:1px solid rgba(255,204,153,.5);
            padding: 3%;
            margin: 0 10%;

        }
        a{
            text-decoration: none;
            color: rgba(255,204,153,.9);
        }
    </style>
    <body>
    <h1><a href="font/ttq.ttf">选择文本</a></h1>
    <form action="" method="post" enctype="multipart/form-data" id="myform">
        <table >
            <tr><td>选择文本:</td><td><div class="sp"><input type="file" name="txt" class="upc"><span class="su">上传</span></div></td></tr>
            <tr><td>选择图片:</td><td><div class="sp"><input type="file" name="img" class="upc"><span class="su">上传</span></div></td></tr>
            <tr><td><input id="btn" type="button" value="提交" class="btnc"></td><td></td></tr>
        </table>

    <form>
        <div style="width: 100%;border-bottom: 1.5px dashed rgba(255,204,153,.5);text-align: center;margin:10% 0">华丽的分割线</div>
        <div>使用说明</div>
        <div>tips:</div>
    <pre>
    1.选择文本文件,最好选择txt文本里面存放你想要显示的内容。
    2.选择图片：图片最好为色彩分明的图片支持主流的.PNG.JPG.JPEG.BMP。
    对了图片不要太大最大不要超过几百K，我怕服务器受不住
    3.出现错误,您老可以重新试一下.....我发现了BUG
    </pre>
            <div style="width: 100%;border-bottom: 1.5px dashed rgba(255,204,153,.5);text-align: center;margin:10% 0">华丽的分割线TWO</div>
            <div>参考实例图片[图片背景最好为透明,自己可以PS去抠图]</div>
        <img src="static/12.png" width="200px" height="300px">
        <div>参考实例文本[自己可以输入]<a href="static/dora.txt">下载链接</a></div>
            <img src="static/121.png" width="200px" height="300px">
        <div>最后的图片[保存下来就好了]</div>
            <img src="static/uploads.png" width="200px" height="300px">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="static/alert.js"></script>
        <script>
                        var M={}
            function abc(types){
                if(types==".jpg"||types==".png"||types==".jpeg"||types==".bmp"){
                    return true
                }
                else {
                    return false
                }
            }
    /*        $(".upc").click(function () {
                var txt =$(this).prev().val()
                M.dialog31 = jqueryAlert({
                    'content' : txt
                })
            })*/
    $(function(){

        $("#btn").click(function(){
            var txt =$("input[name='txt']").val()
            var img =$("input[name='img']").val()
            var to =txt.lastIndexOf(".")
            var txts =txt.substring(to)
            var co =img.lastIndexOf(".")
            var types =img.substring(co)
            if(txts==".txt"&&abc(types)){
                if(M.dialog3){
                    return M.dialog3.show();

                }
                    M.dialog3 = jqueryAlert({
                        'title'   : '友情提示',
                        'content' : '你选择的文本为：'+txt+'选择的图片为：'+img+'请确定无误',
                        'modal'   : true,
                        'buttons' :{
                            '没错' : function(){
                                var newUrl = 'uploads?rand='+Math.random();    //设置新提交地址
                                $("#myform").attr('action',newUrl);    //通过jquery为action属性赋值
                                $("#myform").submit();    //提交ID为myform的表单
                                M.dialog3.close();
                                M.dialog31 = jqueryAlert({
                                    'content' : '小的服务器辣鸡加载需要时间请耐心等待...'
                                })
                            },
                            '老子错了' : function(){
                                if(M.dialog31){
                                    return M.dialog31.show();
                                }
                                M.dialog31 = jqueryAlert({
                                    'content' : '...'
                                })
                            }
                        }
                    })

            } else{
                // alert("请选择")

                if(M.dialog3){
                    return M.dialog3.show();

                }
                    M.dialog3 = jqueryAlert({
                        'title'   : '友情提示',
                        'content' : '你选择的文本或者图片格式不正确',
                        'modal'   : true,
                        'buttons' :{
                            '知道了' : function(){
                                M.dialog3.close();
                            },
                            '我偏不改' : function(){
                                if(M.dialog31){
                                    return M.dialog31.show();
                                }
                                M.dialog31 = jqueryAlert({
                                    'content' : '爱改不改...'
                                })
                            }
                        }
                    })
            }

        })
    })
            $(".upc").hover(function () {
                $(this).next().css("background-color","rgba(255,204,153,.5)")
            },function(){
         $(this).next().css("background-color","")
    })
        </script>
    </body>
</html>